<template>
  <div class="container">
    <dv-decoration-9 v-for="({label,value},index) in rootThis.flowDash.data" :key="index" style="width:120px;height:120px;">
      <div class="dash">
          <dv-digital-flop  style="width:100px;height:30px;" :config="value | castConfig"  />
          <div style="font-size:15px;" v-text="label"></div>
      </div>
    </dv-decoration-9>
  </div>
</template>

<script>
import injectRootInstance from '@/components/datav/mixins/injectRootInstance'
function formatter (number) {
  const numbers = number.toString().split('').reverse()
  const segs = []

  while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

  return segs.join(',').split('').reverse().join('')
}
export default {
  mixins: [injectRootInstance],
  data () {
    return {
    }
  },
  filters: {
    castConfig (value) {
      return {
        number: [value],
        content: '{nt}',
        formatter
      }
    }
  },
  mounted () {
    setInterval(() => {
      this.rootThis.flowDasht.app++
      this.rootThis.flowDasht.jx++
      this.rootThis.flowDasht.service = Math.floor((Math.random() * 10) + 1)
      this.rootThis.flowDasht.user = this.rootThis.flowDasht.user + 5
      this.rootThis.flowDasht.times = this.rootThis.flowDasht.times + 10
    }, 4000)
  }
}
</script>

<style scoped>
.container{
  display:flex;
  justify-content: space-around;
}
.dash div{
  text-align:center;
}
</style>
